<template>
  <div class='noticeManage' >
    <el-row class='first-title'>
      <div class="lf">
        <h3 class="">{{searchDeptCategory}}</h3>
      </div>
    </el-row>
    <el-row class="second-sec">
      <el-tabs v-model="tabActiveName" @tab-click='noticeTabClick'>
        <el-tab-pane label="发布公告" name="issue">
          <div class="issuePart">
            <div class="notice-title">
              <el-form :model="noticeForm">
                <el-row :gutter="20">
                  <el-col :span='7'>
                    <el-form-item label="类型：" label-width="57px" class="formType">
                      <el-select v-model="noticeForm.type" placeholder="请选择类型">
                        <el-option
                          v-for="item in typeList"
                          :key="item.key"
                          :label="item.label"
                          :value="item.value">
                        </el-option>
                      </el-select>
                    </el-form-item>
                  </el-col>
                  <el-col :span='14'>
                    <el-form-item label="标题：" label-width="110px" class='titleItem'>
                      <el-input v-model="noticeForm.title_name" placeholder="请输入标题"></el-input>
                    </el-form-item>
                  </el-col>
                </el-row>
                <el-row :gutter="20">
                  <el-col :span='7'>
                    <el-form-item label="发布人:" class='titleItemissuer'>
                      <el-input v-model="noticeForm.author" placeholder="请输入发布人名称"></el-input>
                    </el-form-item>
                  </el-col>
                  <el-col :span='10'>
                    <el-form-item
                      label="发布时间："
                      class='titleItem'
                      label-width="110px"
                      >
                      <el-date-picker
                        type="datetime"
                        placeholder="选择日期时间"
                        v-model="noticeForm.authorTime"
                        style="width: 100%;">
                      </el-date-picker>
                    </el-form-item>
                  </el-col>
                </el-row>
                <el-row :gutter="20">
                  <el-col :span='7'>
                    <el-form-item label="是否置顶：" class='titleItem'>
                      <el-checkbox label="" name="type" v-model="noticeForm.is_top"></el-checkbox>
                    </el-form-item>
                  </el-col>
                  <el-col :span='14'>
                    <el-form-item
                      label="置顶到期时间："
                      class='titleItem'
                      v-show="noticeForm.is_top">
                      <el-date-picker
                        type="datetime"
                        placeholder="选择日期时间"
                        v-model="noticeForm.top_end_time"
                        style="width: 100%;">
                      </el-date-picker>
                    </el-form-item>
                  </el-col>
                </el-row>
                <el-form-item label="内容:" class='formContent'>
                  <Ueditor
                    @ready="editorReady"
                    :ueditorConfig='ueditorConfig'
                    style="display: inline-block;">
                  </Ueditor>
                </el-form-item>
                <el-form-item label='选择文件'>
                  <el-upload
                      :action='Axios.baseURI+"/announcement/uploadFile?token="+token'
                      style='width:30%'
                        multiple
                      :before-upload='beforeAvatarUpload'
                      :on-change='handlePreview'
                      :on-remove='handleUploadRemove'
                      :file-list="fileList">
                      <el-button size="small" type="primary">点击上传</el-button>
                      <div slot="tip" class="el-upload__tip">上传文件不能超过10MB</div>
                  </el-upload>
                </el-form-item>
                <el-form-item class="submitBts">
                  <el-button type="primary" @click="onSubmitNoticeForm">提交</el-button>
                  <el-button type="success" @click="onPreviewNoticeForm">预览</el-button>
                  <el-button @click="clearNoticeForm">重置</el-button>
                  <el-button
                    @click="onCancelEditNotice"
                    v-show="issueOrEdit === 'edit'? true: false">取消修改</el-button>
                </el-form-item>
              </el-form>
            </div>
          </div>
        </el-tab-pane>
        <el-tab-pane label="管理公告" name="manage">
          <div class="managePart">
            <el-table
              :data="noticeTableData"
              border
              style="width: 100%">
              <el-table-column
                v-for='item in tableColumn'
                :key="item.prop"
                :prop="item.prop"
                :label="item.label"
                :width="item.width"
                :formatter="item.formatter">
              </el-table-column>
              <el-table-column
                label="操作"
                width="140">
                <template scope="scope">
                  <el-button
                    class="successBt"
                    @click="noticeLookClick(scope.row)"
                    type="text"
                    size="small">
                    查看
                  </el-button>
                  <el-button
                    @click="noticeEditClick(scope.row)"
                    type="text"
                    size="small">编辑</el-button>
                  <el-button
                    class="dangerBt"
                    @click="noticeDeleteClick(scope.row)"
                    type="text"
                    size="small">删除</el-button>
                </template>
              </el-table-column>
            </el-table>
            <div class="paginationDiv">
              <my-pagination
                :sizeChange='handleSizeChange'
                :currentChange='handleCurrentChange'
                :totals='pagination.total'>
              </my-pagination>
            </div>
          </div>
        </el-tab-pane>
      </el-tabs>
    </el-row>
    <el-dialog
      title="查看"
      :visible.sync="lookDialogVisible"
      width="50%"
      :lock-scroll='false'
      class="lookModal">
      <div class="lookModalDiv">
        <div class="noticeTitle">
          <i class="isTop" v-if="lookNoticeData.is_top === 1? true: false">顶</i>
          {{lookNoticeData.title_name}}
          <span>({{lookNoticeData.author_time}})</span>
        </div>
        <div class="noticeSomething">
          <div>类型：<span>{{lookNoticeData.type === 1?'任免信息' : (lookNoticeData.type === 2 ? '公示信息' : '招聘信息')}}</span></div>
          <div v-if="lookNoticeData.is_top === 1? true: false">
            置顶到期时间：
            <span>{{lookNoticeData.top_end_time}}</span>
          </div>
        </div>
        <div>
          <div class="noticeContent" v-html="lookNoticeData.content"></div>
        </div>
      </div>
      <span slot="footer" class="dialog-footer">
        <el-button type="primary" @click="lookDialogVisible = false">确 定</el-button>
      </span>
    </el-dialog>
    <el-dialog
      title="提示"
      :visible.sync="deleteDialogVisible"
      width="20%"
      :lock-scroll='false'>
      <div class="deleteModalCont">
        确定要删除吗?
      </div>
      <span slot="footer" class="dialog-footer">
        <el-button type="primary" @click="deleteNotice">确 定</el-button>
        <el-button @click="deleteDialogVisible = false">取 消</el-button>
      </span>
    </el-dialog>
    <el-dialog
      title="提示"
      :visible.sync="cancelEditVisible"
      width="20%"
      :lock-scroll='false'>
      <div class="deleteModalCont">
        确定要取消修改吗?
      </div>
      <span slot="footer" class="dialog-footer">
        <el-button type="primary" @click="cancelEditNotice">确 定</el-button>
        <el-button @click="cancelEditVisible = false">取 消</el-button>
      </span>
    </el-dialog>
  </div>
</template>

<script>
  import Vue from 'vue'
  import Ueditor from '@/components/public/Ueditor'
  import myPagination from '@/components/public/pagination'
  import { Message, Select,Option,Input, Checkbox, DatePicker,Upload,Dialog, Col, Row,Tabs,TabPane,Table,TableColumn,Pagination} from 'element-ui' 
  // Vue.use(Message)
  Vue.use(Select)
  Vue.use(Option)
  Vue.use(Input)
  Vue.use(Checkbox)
  Vue.use(DatePicker)
  Vue.use(Dialog)
  Vue.use(Col)
  Vue.use(Row)
  Vue.use(Tabs)
  Vue.use(TabPane)
  Vue.use(Table)
  Vue.use(TableColumn)
  Vue.use(Pagination)
  Vue.use(Upload)

  export default {
    data() {
      return {
        searchDeptCategory:'通知公告管理',
        fileList: [],
        myFileList:[],
        typeList: [
          {
            key: '1',
            label: '任免信息',
            value: 1
          },
          {
            key: '2',
            label: '公示信息',
            value: 2
          },{
            key: '2',
            label: '招聘信息',
            value: 3
          }
        ],
        token:null,
        tabActiveName: 'issue',
        issueOrEdit: 'issue',
        noticeForm: {
          type: '',
          title_name: '',
          is_top: '',
          top_end_time: '',
          authorTime:'',
          content: '',
          author:''
        },
        noticeTableData:[],
        noticeRowData:{},
        lookNoticeData:{},
        tableColumn: [
          {
            prop: 'index',
            label: '序号',
            width: '70'
          },
          {
            prop: 'type',
            label: '公告类型',
            width: '100',
            formatter:function(row, column, cellValue){
              if (cellValue === 1) {
                return '任免信息'
              }else if(cellValue === 2){
                return '公示信息'
              } else {
                return '招聘信息'
              }
            }
          },
          {
            prop: 'title_name',
            label: '标题',
            width: ''
          },
          {
            prop: 'author',
            label: '发布人',
            width: '120'
          },
          {
            prop: 'author_time',
            label: '发布日期',
            width: '120',
            formatter:function(row, column, cellValue){
              if (!cellValue) {
                  return '';
              }
              return cellValue.split(' ')[0]
            }
          },
          {
            prop: 'is_top',
            label: '是否置顶',
            width: '100',
            formatter:function(row, column, cellValue){
              if (cellValue === 1) {
                return '是'
              }else{
                return '否'
              }
            }
          }
        ],
        previewDialogVisible:false,
        lookDialogVisible:false,
        deleteDialogVisible:false,
        cancelEditVisible: false,
        pagination:{
          pageNum:1,
          pageSize:10,
          total:0
        },
        ueditorConfig:{
          initialFrameWidth :800,//设置编辑器宽度
          initialFrameHeight:400,//设置编辑器高度
          scaleEnabled:false,
          autoHeightEnabled: false,
          toolbars:[
            ['Undo','Redo','|',
          'Bold','Italic','Underline','StrikeThrough','Superscript','Subscript','RemoveFormat','FormatMatch','|',
          'BlockQuote','|',
          'PastePlain','|',
          'ForeColor','BackColor','InsertOrderedList','InsertUnorderedList','|',
          'Paragraph','RowSpacing','FontFamily','FontSize','|',
          'DirectionalityLtr','DirectionalityRtl','|','','Indent','Outdent','|',
          'JustifyLeft','JustifyCenter','JustifyRight','JustifyJustify','|',
          'Link','Unlink','Anchor','MultiMenu','Code', '|',
          'Horizontal','Date','Time','Spechars','|',
          'InsertTable','DeleteTable','InsertParagraphBeforeTable','InsertRow','DeleteRow','InsertCol','DeleteCol','MergeCells','MergeRight','MergeDown','SplittoCells','SplittoRows','SplittoCols','|',
          'SelectAll','ClearDoc']
          ]
        },
        editorInstance:null
      }
    },
    methods: {
      formatTableData:function(data){
        for(var i=0; i<data.length; i++){
          data[i].index=(i+1)+this.pagination.pageSize*(this.pagination.pageNum-1);
          data[i].title_name = data[i].title_name.replace('职位审批表','')
        }
        return data
      },
      formatDateTime:function(){
        Date.prototype.Format = function (fmt) {
          var o = {
              "M+": this.getMonth() + 1, //月份 
              "d+": this.getDate(), //日 
              "h+": this.getHours(), //小时 
              "m+": this.getMinutes(), //分 
              "s+": this.getSeconds(), //秒 
              "q+": Math.floor((this.getMonth() + 3) / 3), //季度 
              "S": this.getMilliseconds() //毫秒 
          };
          if (/(y+)/.test(fmt)) fmt = fmt.replace(RegExp.$1, (this.getFullYear() + "").substr(4 - RegExp.$1.length));
          for (var k in o)
          if (new RegExp("(" + k + ")").test(fmt)) fmt = fmt.replace(RegExp.$1, (RegExp.$1.length == 1) ? (o[k]) : (("00" + o[k]).substr(("" + o[k]).length)));
          return fmt;
        }
      },
      getNowTime:function(){
        var d = new Date().Format("yyyy-MM-dd hh:mm:ss")
        return d
      },
      //ueditor的onready事件  这里获取ueditor的实例
      editorReady:function(instance){
        this.editorInstance = instance
      },
      getNoticeData:function(){
        var obj = {
          type:0,
          pageNum:this.pagination.pageNum,
          pageSize: this.pagination.pageSize
        }
        this.PostAjax('/announcement/queryMoreList',obj,this.getNoticeDataCB)
      },
      getNoticeDataCB:function(data){
        if (data.data.datas) {
          this.noticeTableData=this.formatTableData(data.data.datas)
          this.pagination.total=data.data.total
          this.fileList = []
          console.log('getNoticeDataCB',this.noticeTableData)
        }
      },
      noticeTabClick:function(tab){
        var self = this
        if (this.issueOrEdit === 'edit'&& tab.name === 'manage') {
          setTimeout(function(){
            self.tabActiveName = 'issue'
          },200)
          this.cancelEditVisible = true
        }
      },
      onCancelEditNotice:function(){
        this.cancelEditVisible = true
      },
      cancelEditNotice:function(){
        this.cancelEditVisible = false
        this.tabActiveName = 'manage'
        this.issueOrEdit = 'issue'
        this.clearNoticeForm()
      },
      typeListOnChange:function(e){
        this.type = e
        switch(e){
          case 'dismiss':
            break;
          case 'notice':
            break;
          default:
            break;
        }
      },
      onSubmitNoticeForm:function(){
        var obj = {}
        this.noticeForm.content = this.editorInstance.getContent()
        obj = {
          type: this.noticeForm.type,
          titleName: this.noticeForm.title_name,
          author: this.noticeForm.author,
          isTop: this.noticeForm.is_top? 1 : 0,
          content: this.noticeForm.content,
          fileIds:this.myFileList.toString()
        }
        obj.authorTime = new Date(this.noticeForm.authorTime).getTime() 
        if (this.noticeForm.is_top) {
          if (typeof this.noticeForm.top_end_time === 'object') {
            obj.topEndTime = this.noticeForm.top_end_time.getTime()
          }else{
            obj.topEndTime = new Date(this.noticeForm.top_end_time).getTime()
          }
        }else{
          obj.topEndTime = ''
        }
        if (this.issueOrEdit === 'edit') {
          obj.id = this.noticeForm.id
        }
        this.PostAjax('/announcement/saveNotice',obj,this.submitNoticeFormCB)
      },
      submitNoticeFormCB:function(data){
        if (data.data.status === 1) {
          if (this.issueOrEdit === 'edit') {
            Message.success('修改成功!')
            this.tabActiveName = 'manage'
            this.issueOrEdit === 'issue'
          }else{
            Message.success('发布成功!')
          }
          this.getNoticeData()
          this.clearNoticeForm()
        }else{
          if (this.issueOrEdit === 'edit') {
            Message.error('修改失败!')
          }else{
            Message.error('发布失败!')
          }
        }
      },
      onPreviewNoticeForm:function(){
        var obj
        this.noticeForm.content = this.editorInstance.getContent()
        obj = JSON.parse(JSON.stringify(this.noticeForm))
        obj.is_top = obj.is_top? 1 : 0
        obj.author_time = this.getNowTime()
        this.lookNoticeData = obj
        this.lookDialogVisible = true
      },
      clearNoticeForm:function(){
        for(var key in this.noticeForm){
          this.noticeForm[key] = ''
        }
        this.editorInstance.setContent('')
      },
      noticeLookClick:function(row){
        this.lookDialogVisible = true
        this.lookNoticeData = JSON.parse(JSON.stringify(row))
      },
      noticeEditClick:function(row){
        this.tabActiveName = 'issue'
        this.issueOrEdit = 'edit'
        var result = JSON.parse(JSON.stringify(row));
        result.authorTime = row.author_time;
        this.noticeForm = JSON.parse(JSON.stringify(result))
        this.noticeForm.is_top = this.noticeForm.is_top === 1? true : false
        this.editorInstance.setContent(this.noticeForm.content)
      },
      noticeDeleteClick:function(row){
        this.noticeRowData = JSON.parse(JSON.stringify(row))
        this.deleteDialogVisible = true
      },
      deleteNotice:function(){
        this.PostAjax('/announcement/deleteNotice',{id:''+this.noticeRowData.id},this.deleteNoticeCB)
      },
      deleteNoticeCB:function(data){
        if (data.data.status === 1) {
          this.deleteDialogVisible = false
          this.getNoticeData()
          Message.success('删除成功!')
        }else{
          Message.error('删除失败!')
        }
      },
      PostAjax:function(url,params,callback){
        var self = this;
        this.Axios.Post(url,params).then(function(res){
          if(callback){
            callback(res)
          }
        })
      },
      handleSizeChange(val) {
        console.log(`每页 ${val} 条`);
        this.pagination.pageSize=val
        this.getNoticeData()
      },
      handleUploadRemove(file, fileList) {
      let result = [];
      debugger;
      fileList.forEach((ele, index, arr) => {
        if (arr[index].response) {
          result.push(arr[index].response.datas.file_id);
        }
      });

      this.myFileList = result;
      },
      handlePreview(file,fileList) {
        let result = [];

      fileList.forEach((ele, index, arr) => {
        if (arr[index].response) {
          result.push(arr[index].response.datas.file_id);
        }
      });

      this.myFileList = result;
      },
      beforeAvatarUpload(file) {
      const isLt2M = file.size / 1024 / 1024 < 10;

      if (!isLt2M) {
        Message.error("上传文件大小不能超过 10MB!");
      }
      return isLt2M;
    },
      handleCurrentChange(val) {
        console.log(`当前页: ${val}`);
        this.pagination.pageNum=val
        this.getNoticeData()
      }
    },
    computed:{
    },
    created:function(){
      this.formatDateTime()
    },
    mounted: function () {
      this.getNoticeData();
      this.token = localStorage.getItem("token");
    },
    beforeDestroy: function () {
      window.removeEventListener("scroll",this.scrollFunc);
    },
    components: {
      Ueditor,
      myPagination
    },
    watch:{
    },
    filters:{
    }
  }
</script>

<style scoped>
  .noticeManage .successBt{
    color: #13ce66;
  }
  .noticeManage .successBt:hover{
    color: #42d885;
  }
  .noticeManage .dangerBt{
    color: #ff4949;
  }
  .noticeManage .dangerBt:hover{
    color: #ff6d6d;
  }
  .noticeManage .first-title h3{
      font-size: 24px;
      margin-top: 20px;
      margin-bottom: 20px;
      font-weight: 500;
      line-height: 1.1;
  }
  .noticeManage .first-title h3 small{
    font-size: 65%;
    font-weight: normal;
    line-height: 1;
    color: #777;
    margin-left:5px;
  }
  .noticeManage .second-sec{
      position: relative;
      border-radius: 3px;
      background: #ffffff;
      border-top: 3px solid #d2d6de;
      margin-bottom: 20px;
      width: 100%;
      box-shadow: 0 1px 1px rgba(0, 0, 0, 0.1);
      border-top-color: #00a65a;
      min-height: 420px;
  }
  .noticeManage .issuePart, .noticeManage .managePart{
    padding: 20px;
  }
  .noticeManage .notice-title{
    border-bottom: 1px solid #f4f4f4;
    padding:10px;
    overflow: hidden;
  }
  .noticeManage .sendBt{
    text-align: center;
    padding: 10px 0;
  }
  .noticeManage .paginationDiv{
    padding: 10px 0;
    margin-top: 20px;
  }
  .noticeManage .deleteModalCont{
    padding-left: 30px;
  }
  .noticeManage .lookModalDiv{
    padding: 0 10px;
  }
  .noticeManage .lookModal .noticeTitle{
    font-size: 20px;
    padding: 10px 0;
    color: #2544a7;
  }
  .noticeManage .lookModal i{
    display: inline-block;
    padding: 2px;
    background-color: #ff9800;
    color:#ffffff;
    font-size: 12px;
    font-style: normal;
    vertical-align: top;
  }
  .noticeManage .lookModal .noticeTitle span{
    font-size: 12px;
    padding: 0 5px;
    color: #999;
  }
  .noticeManage .lookModal .noticeSomething>div{
    display: inline-block;
    margin-right:30px;
  }
  .noticeManage .lookModal .noticeSomething>div>span{
    color:cornflowerblue;
  }
  .noticeManage .lookModal .noticeContent{
    padding-top:30px; 
  }
</style>
<style>
  /*修改element-ui样式*/
  .noticeManage .notice-title .el-select{
    width: 135px;
  }
  .noticeManage .notice-title .titleItem .el-input{
    width: 350px;
  }
  .noticeManage .notice-title .titleItemissuer .el-input{
    width:135px;
  }
  .noticeManage .notice-title .el-date-editor{
    width: 250px!important;
  }
  .noticeManage .submitBts .el-form-item__content{
    text-align: center;
  }
</style>

<style>
@charset "UTF-8";
.el-upload-cover__title,
.el-upload-list__item-name {
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}
.el-progress-bar__inner:after,
.el-upload-cover:after,
.el-upload-list--picture-card .el-upload-list__item-actions:after {
  display: inline-block;
  content: '';
  height: 100%;
  vertical-align: middle;
}
.el-progress {
  position: relative;
  line-height: 1;
}
.el-progress.is-exception .el-progress-bar__inner {
  background-color: #ff4949;
}
.el-progress.is-exception .el-progress__text {
  color: #ff4949;
}
.el-progress.is-success .el-progress-bar__inner {
  background-color: #13ce66;
}
.el-progress.is-success .el-progress__text {
  color: #13ce66;
}
.el-progress__text {
  font-size: 14px;
  color: #48576a;
  display: inline-block;
  vertical-align: middle;
  margin-left: 10px;
  line-height: 1;
}
.el-progress__text i {
  vertical-align: middle;
  display: block;
}
.el-progress--circle {
  display: inline-block;
}
.el-progress--circle .el-progress__text {
  position: absolute;
  top: 50%;
  left: 0;
  width: 100%;
  text-align: center;
  margin: 0;
  -ms-transform: translate(0, -50%);
  transform: translate(0, -50%);
}
.el-progress--circle .el-progress__text i {
  vertical-align: middle;
  display: inline-block;
}
.el-progress--without-text .el-progress__text {
  display: none;
}
.el-progress--without-text .el-progress-bar {
  padding-right: 0;
  margin-right: 0;
  display: block;
}
.el-progress--text-inside .el-progress-bar {
  padding-right: 0;
  margin-right: 0;
}
.el-progress-bar {
  padding-right: 50px;
  display: inline-block;
  vertical-align: middle;
  width: 100%;
  margin-right: -55px;
  box-sizing: border-box;
}
.el-progress-bar__outer {
  height: 6px;
  border-radius: 100px;
  background-color: #e4e8f1;
  overflow: hidden;
  position: relative;
  vertical-align: middle;
}
.el-progress-bar__inner {
  position: absolute;
  left: 0;
  top: 0;
  height: 100%;
  background-color: #20a0ff;
  text-align: right;
  border-radius: 100px;
  line-height: 1;
  white-space: nowrap;
}
.el-progress-bar__innerText {
  display: inline-block;
  vertical-align: middle;
  color: #fff;
  font-size: 12px;
  margin: 0 5px;
}
@keyframes progress {
  0% {
    background-position: 0 0;
  }
  100% {
    background-position: 32px 0;
  }
}
.el-upload {
  display: inline-block;
  text-align: center;
  cursor: pointer;
}
.el-upload iframe {
  position: absolute;
  z-index: -1;
  top: 0;
  left: 0;
  opacity: 0;
  filter: alpha(opacity=0);
}
.el-upload__input {
  display: none;
}
.el-upload__tip {
  font-size: 12px;
  color: #8391a5;
  margin-top: 7px;
}
.el-upload--picture-card {
  background-color: #fbfdff;
  border: 1px dashed #c0ccda;
  border-radius: 6px;
  box-sizing: border-box;
  width: 148px;
  height: 148px;
  cursor: pointer;
  line-height: 146px;
  vertical-align: top;
}
.el-upload--picture-card i {
  font-size: 28px;
  color: #8c939d;
}
.el-upload--picture-card:hover {
  border-color: #20a0ff;
  color: #20a0ff;
}
.el-upload-dragger {
  background-color: #fff;
  border: 1px dashed #d9d9d9;
  border-radius: 6px;
  box-sizing: border-box;
  width: 360px;
  height: 180px;
  text-align: center;
  cursor: pointer;
  position: relative;
  overflow: hidden;
}
.el-upload-dragger .el-upload__text {
  color: #97a8be;
  font-size: 14px;
  text-align: center;
}
.el-upload-dragger .el-upload__text em {
  color: #20a0ff;
  font-style: normal;
}
.el-upload-dragger .el-icon-upload {
  font-size: 67px;
  color: #97a8be;
  margin: 40px 0 16px;
  line-height: 50px;
}
.el-upload-dragger + .el-upload__tip {
  text-align: center;
}
.el-upload-dragger ~ .el-upload__files {
  border-top: 1px solid rgba(191, 203, 217, 0.2);
  margin-top: 7px;
  padding-top: 5px;
}
.el-upload-dragger:hover {
  border-color: #20a0ff;
}
.el-upload-dragger.is-dragover {
  background-color: rgba(32, 159, 255, 0.06);
  border: 2px dashed #20a0ff;
}
.el-upload-list {
  margin: 0;
  padding: 0;
  list-style: none;
}
.el-upload-list.is-disabled
  .el-upload-list__item:hover
  .el-upload-list__item-status-label {
  display: block;
}
.el-upload-list__item {
  transition: all 0.5s cubic-bezier(0.55, 0, 0.1, 1);
  font-size: 14px;
  color: #48576a;
  line-height: 1.8;
  margin-top: 5px;
  box-sizing: border-box;
  border-radius: 4px;
  width: 100%;
  position: relative;
}
.el-upload-list__item .el-progress-bar {
  margin-right: 0;
  padding-right: 0;
}
.el-upload-list__item .el-progress {
  position: absolute;
  top: 20px;
  width: 100%;
}
.el-upload-list__item .el-progress__text {
  position: absolute;
  top: -13px;
  right: 0;
}
.el-upload-list__item:first-child {
  margin-top: 10px;
}
.el-upload-list__item .el-icon-upload-success {
  color: #13ce66;
}
.el-upload-list__item .el-icon-close {
  display: none;
  position: absolute;
  top: 5px;
  right: 5px;
  cursor: pointer;
  opacity: 0.75;
  color: #48576a;
  -ms-transform: scale(0.7);
  transform: scale(0.7);
}
.el-upload-list__item .el-icon-close:hover {
  opacity: 1;
}
.el-upload-list__item:hover {
  background-color: #eef1f6;
}
.el-upload-list__item:hover .el-icon-close {
  display: inline-block;
}
.el-upload-list__item:hover .el-progress__text {
  display: none;
}
.el-upload-list__item.is-success .el-upload-list__item-status-label {
  display: block;
}
.el-upload-list__item.is-success .el-upload-list__item-name:hover {
  color: #20a0ff;
  cursor: pointer;
}
.el-upload-list__item.is-success:hover .el-upload-list__item-status-label {
  display: none;
}
.el-upload-list__item-name {
  color: #48576a;
  display: block;
  margin-right: 40px;
  padding-left: 4px;
  transition: color 0.3s;
}
.el-upload-list__item-name [class^='el-icon'] {
  color: #97a8be;
  margin-right: 7px;
  height: 100%;
  line-height: inherit;
}
.el-upload-list__item-status-label {
  position: absolute;
  right: 5px;
  top: 0;
  line-height: inherit;
  display: none;
}
.el-upload-list__item-delete {
  position: absolute;
  right: 10px;
  top: 0;
  font-size: 12px;
  color: #48576a;
  display: none;
}
.el-upload-list__item-delete:hover {
  color: #20a0ff;
}
.el-upload-list--picture-card {
  margin: 0;
  display: inline;
  vertical-align: top;
}
.el-upload-list--picture-card .el-upload-list__item {
  overflow: hidden;
  background-color: #fff;
  border: 1px solid #c0ccda;
  border-radius: 6px;
  box-sizing: border-box;
  width: 148px;
  height: 148px;
  margin: 0 8px 8px 0;
  display: inline-block;
}
.el-upload-list--picture-card .el-upload-list__item .el-icon-check,
.el-upload-list--picture-card .el-upload-list__item .el-icon-circle-check {
  color: #fff;
}
.el-upload-list--picture-card .el-upload-list__item .el-icon-close,
.el-upload-list--picture-card
  .el-upload-list__item:hover
  .el-upload-list__item-status-label {
  display: none;
}
.el-upload-list--picture-card .el-upload-list__item:hover .el-progress__text {
  display: block;
}
.el-upload-list--picture-card .el-upload-list__item-name {
  display: none;
}
.el-upload-list--picture-card .el-upload-list__item-thumbnail {
  width: 100%;
  height: 100%;
}
.el-upload-list--picture-card .el-upload-list__item-status-label {
  position: absolute;
  right: -15px;
  top: -6px;
  width: 40px;
  height: 24px;
  background: #13ce66;
  text-align: center;
  -ms-transform: rotate(45deg);
  transform: rotate(45deg);
  box-shadow: 0 0 1pc 1px rgba(0, 0, 0, 0.2);
}
.el-upload-list--picture-card .el-upload-list__item-status-label i {
  font-size: 12px;
  margin-top: 11px;
  -ms-transform: rotate(-45deg) scale(0.8);
  transform: rotate(-45deg) scale(0.8);
}
.el-upload-list--picture-card .el-upload-list__item-actions {
  position: absolute;
  width: 100%;
  height: 100%;
  left: 0;
  top: 0;
  cursor: default;
  text-align: center;
  color: #fff;
  opacity: 0;
  font-size: 20px;
  background-color: rgba(0, 0, 0, 0.5);
  transition: opacity 0.3s;
}
.el-upload-list--picture-card .el-upload-list__item-actions span {
  display: none;
  cursor: pointer;
}
.el-upload-list--picture-card .el-upload-list__item-actions span + span {
  margin-left: 15px;
}
.el-upload-list--picture-card
  .el-upload-list__item-actions
  .el-upload-list__item-delete {
  position: static;
  font-size: inherit;
  color: inherit;
}
.el-upload-list--picture-card .el-upload-list__item-actions:hover {
  opacity: 1;
}
.el-upload-list--picture-card .el-upload-list__item-actions:hover span {
  display: inline-block;
}
.el-upload-list--picture-card .el-progress {
  top: 50%;
  left: 50%;
  -ms-transform: translate(-50%, -50%);
  transform: translate(-50%, -50%);
  bottom: auto;
  width: 126px;
}
.el-upload-list--picture-card .el-progress .el-progress__text {
  top: 50%;
}
.el-upload-list--picture .el-upload-list__item {
  overflow: hidden;
  background-color: #fff;
  border: 1px solid #c0ccda;
  border-radius: 6px;
  box-sizing: border-box;
  margin-top: 10px;
  padding: 10px 10px 10px 90px;
  height: 92px;
}
.el-upload-list--picture .el-upload-list__item .el-icon-check,
.el-upload-list--picture .el-upload-list__item .el-icon-circle-check {
  color: #fff;
}
.el-upload-list--picture
  .el-upload-list__item:hover
  .el-upload-list__item-status-label {
  background: 0 0;
  box-shadow: none;
  top: -2px;
  right: -12px;
}
.el-upload-list--picture .el-upload-list__item:hover .el-progress__text {
  display: block;
}
.el-upload-list--picture
  .el-upload-list__item.is-success
  .el-upload-list__item-name {
  line-height: 70px;
  margin-top: 0;
}
.el-upload-list--picture
  .el-upload-list__item.is-success
  .el-upload-list__item-name
  i {
  display: none;
}
.el-upload-list--picture .el-upload-list__item-thumbnail {
  vertical-align: middle;
  display: inline-block;
  width: 70px;
  height: 70px;
  float: left;
  position: relative;
  z-index: 1;
  margin-left: -80px;
}
.el-upload-list--picture .el-upload-list__item-name {
  display: block;
  margin-top: 20px;
}
.el-upload-list--picture .el-upload-list__item-name i {
  font-size: 70px;
  line-height: 1;
  position: absolute;
  left: 9px;
  top: 10px;
}
.el-upload-list--picture .el-upload-list__item-status-label {
  position: absolute;
  right: -17px;
  top: -7px;
  width: 46px;
  height: 26px;
  background: #13ce66;
  text-align: center;
  -ms-transform: rotate(45deg);
  transform: rotate(45deg);
  box-shadow: 0 1px 1px #ccc;
}
.el-upload-list--picture .el-upload-list__item-status-label i {
  font-size: 12px;
  margin-top: 12px;
  -ms-transform: rotate(-45deg) scale(0.8);
  transform: rotate(-45deg) scale(0.8);
}
.el-upload-list--picture .el-progress {
  position: relative;
  top: -7px;
}
.el-upload-cover {
  position: absolute;
  left: 0;
  top: 0;
  width: 100%;
  height: 100%;
  overflow: hidden;
  z-index: 10;
  cursor: default;
}
.el-upload-cover img {
  display: block;
  width: 100%;
  height: 100%;
}
.el-upload-cover + .el-upload__inner {
  opacity: 0;
  position: relative;
  z-index: 1;
}
.el-upload-cover__label {
  position: absolute;
  right: -15px;
  top: -6px;
  width: 40px;
  height: 24px;
  background: #13ce66;
  text-align: center;
  -ms-transform: rotate(45deg);
  transform: rotate(45deg);
  box-shadow: 0 0 1pc 1px rgba(0, 0, 0, 0.2);
}
.el-upload-cover__label i {
  font-size: 12px;
  margin-top: 11px;
  -ms-transform: rotate(-45deg) scale(0.8);
  transform: rotate(-45deg) scale(0.8);
  color: #fff;
}
.el-upload-cover__progress {
  display: inline-block;
  vertical-align: middle;
  position: static;
  width: 243px;
}
.el-upload-cover__progress + .el-upload__inner {
  opacity: 0;
}
.el-upload-cover__content {
  position: absolute;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
}
.el-upload-cover__interact {
  position: absolute;
  bottom: 0;
  left: 0;
  width: 100%;
  height: 100%;
  background-color: rgba(0, 0, 0, 0.72);
  text-align: center;
}
.el-upload-cover__interact .btn {
  display: inline-block;
  color: #fff;
  font-size: 14px;
  cursor: pointer;
  vertical-align: middle;
  transition: transform 0.3s cubic-bezier(0.23, 1, 0.32, 1) 0.1s,
    opacity 0.3s cubic-bezier(0.23, 1, 0.32, 1) 0.1s;
  margin-top: 60px;
}
.el-upload-cover__interact .btn span {
  opacity: 0;
  transition: opacity 0.15s linear;
}
.el-upload-cover__interact .btn:not(:first-child) {
  margin-left: 35px;
}
.el-upload-cover__interact .btn:hover {
  -ms-transform: translateY(-13px);
  transform: translateY(-13px);
}
.el-upload-cover__interact .btn:hover span {
  opacity: 1;
}
.el-upload-cover__interact .btn i {
  color: #fff;
  display: block;
  font-size: 24px;
  line-height: inherit;
  margin: 0 auto 5px;
}
.el-upload-cover__title {
  position: absolute;
  bottom: 0;
  left: 0;
  background-color: #fff;
  height: 36px;
  width: 100%;
  font-weight: 400;
  text-align: left;
  padding: 0 10px;
  margin: 0;
  line-height: 36px;
  font-size: 14px;
  color: #48576a;
}
</style>

